<!--  线 + 柱混合图 -->
<template>
    <el-card>
        <template #header>
            <div class="title">
                业绩柱状图
                <el-tooltip effect="dark" content="点击试试下载" placement="bottom">
                    <i-ep-download class="download" @click="downloadEchart" />
                </el-tooltip>
            </div>
        </template>

        <div :id="id" :class="className" :style="{ height, width }"></div>
    </el-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts"
import { ref, onMounted } from 'vue'

const props = defineProps({
    id: {
        type: String,
        default: "barChart",
    },
    className: {
        type: String,
        default: "",
    },
    width: {
        type: String,
        default: "200px",
        required: true,
    },
    height: {
        type: String,
        default: "200px",
        required: true,
    },
})

const options = {
    grid: {
        left: "2%",
        right: "2%",
        bottom: "10%",
        containLabel: true,
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "cross",
            crossStyle: {
                color: "#999",
            },
        },
    },
    legend: {
        x: "center",
        y: "bottom",
        data: ["收入", "毛利润", "收入增长率", "利润增长率"],
        textStyle: {
            color: "#999",
        },
    },
    xAxis: [
        {
            type: "category",
            data: ["浙江", "北京", "上海", "广东", "深圳"],
            axisPointer: {
                type: "shadow",
            },
        },
    ],
    yAxis: [
        {
            type: "value",
            min: 0,
            max: 10000,
            interval: 2000,
            axisLabel: {
                formatter: "{value} ",
            },
        },
        {
            type: "value",
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: "{value}%",
            },
        },
    ],
    series: [
        {
            name: "收入",
            type: "bar",
            data: [7000, 7100, 7200, 7300, 7400],
            barWidth: 20,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#83bff6" },
                    { offset: 0.5, color: "#188df0" },
                    { offset: 1, color: "#188df0" },
                ]),
            },
        },
        {
            name: "毛利润",
            type: "bar",
            data: [8000, 8200, 8400, 8600, 8800],
            barWidth: 20,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#25d73c" },
                    { offset: 0.5, color: "#1bc23d" },
                    { offset: 1, color: "#179e61" },
                ]),
            },
        },
        {
            name: "收入增长率",
            type: "line",
            yAxisIndex: 1,
            data: [60, 65, 70, 75, 80],
            itemStyle: {
                color: "#67C23A",
            },
        },
        {
            name: "利润增长率",
            type: "line",
            yAxisIndex: 1,
            data: [70, 75, 80, 85, 90],
            itemStyle: {
                color: "#409EFF",
            },
        },
    ],
}

const downloadEchart = () => {
    // 获取画布图表地址信息
    const img = new Image()
    img.src = chart.value.getDataURL({
        type: "png",
        pixelRatio: 1,
        backgroundColor: "#fff",
    })
    // 当图片加载完成后，生成 URL 并下载
    img.onload = () => {
        const canvas = document.createElement("canvas")
        canvas.width = img.width
        canvas.height = img.height
        const ctx = canvas.getContext("2d")
        if (ctx) {
            ctx.drawImage(img, 0, 0, img.width, img.height)
            const link = document.createElement("a")
            link.download = `业绩柱状图.png`
            link.href = canvas.toDataURL("image/png", 0.9)
            document.body.appendChild(link)
            link.click()
            link.remove()
        }
    }
}

const chart = ref<any>("")
onMounted(() => {
    // 图表初始化
    chart.value = markRaw(
        echarts.init(document.getElementById(props.id) as HTMLDivElement)
    )

    chart.value.setOption(options)

    // 大小自适应
    window.addEventListener("resize", () => {
        chart.value.resize()
    })
})

onActivated(() => {
    if (chart.value) {
        chart.value.resize()
    }
})
</script>
<style lang="scss" scoped>
.title {
    display: flex;
    justify-content: space-between;

    .download {
        cursor: pointer;

        &:hover {
            color: #409eff;
        }
    }
}
</style>
